<template>
  <!-- 选择器弹框 -->
  <view v-if="visible" class="picker-overlay" @click="handleCancel">
    <view class="picker-container" @click.stop>
      <view class="picker-header">
        <text class="picker-cancel" @click="handleCancel">取消</text>
        <text class="picker-confirm" @click="handleConfirm">确认</text>
      </view>
      <view class="picker-content">
        <view 
          v-for="(item, index) in options" 
          :key="index"
          class="picker-item"
          :class="{ 'picker-item-selected': selectedIndex === index }"
          @click="handleSelect(index)"
        >
          <text class="picker-item-text">{{ item }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { ref, onMounted } from 'vue';
export default {
  name: 'PickerComponent',
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: false
    },
    // 选项列表
    options: {
      type: Array,
      default: () => []
    },
    // 默认选中索引
    defaultIndex: {
      type: Number,
      default: 0
    }
  },
  setup(props, { emit }) {
    const selectedIndex = ref(props.defaultIndex);
    const handleSelect = (index) => {
      selectedIndex.value = index;
    };
    const handleCancel = () => {
      emit('cancel');
    };
    const handleConfirm = () => {
      emit('confirm', {
        index: selectedIndex.value,
        value: props.options[selectedIndex.value]
      });
    };
    onMounted(() => {
      selectedIndex.value = props.defaultIndex;
    });
    return {
      selectedIndex,
      handleSelect,
      handleCancel,
      handleConfirm
    }
  }
}
</script>

<style lang="scss" scoped>
/* 选择器弹框样式 */
.picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
}

.picker-container {
  width: 100%;
  background-color: #fff;
  border-radius: 12px 12px 0 0;
  max-height: 70vh;
  overflow: hidden;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.picker-cancel {
  font-size: 16px;
  color: #999;
}

.picker-confirm {
  font-size: 16px;
  color: #07c160;
  font-weight: 500;
}

.picker-content {
  max-height: 60vh;
  overflow-y: auto;
}

.picker-item {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background-color: #f8f8f8;
  }
}

.picker-item-selected {
  background-color: #f0f8ff;
}

.picker-item-text {
  font-size: 16px;
  color: #333;
}

.picker-item-selected .picker-item-text {
  color: #000;
  font-weight: 500;
}
</style>